<template>
  <div>
    <el-descriptions :title="  detailRowData?.vlanName">
      <el-descriptions-item label="网关:">{{detailRowData?.vlanGateway}}</el-descriptions-item>
      <el-descriptions-item label="CIDR:">{{detailRowData?.cird}}</el-descriptions-item>
      <el-descriptions-item label="起始IP（网络地址）:">{{detailRowData?.startIp}}</el-descriptions-item>
      <el-descriptions-item label="截止IP（广播地址）:">{{detailRowData?.endIp}}</el-descriptions-item>
      <el-descriptions-item label="IP池大小:">{{detailRowData?.poolSize}}</el-descriptions-item>
      <el-descriptions-item label="检查时间:">{{detailRowData?.checkTime}}</el-descriptions-item>
      <el-descriptions-item label="创建人:">{{detailRowData?.creator}}</el-descriptions-item>
    </el-descriptions>
    <div class="table-top" v-if="activeName == 'whiteIp'">
      
      <el-button v-has-permi="['ip:whiteip:add']" type="primary" @click="addWhiteIP">增加</el-button>
      <!-- <el-button type="success" @click="editWhiteIP">编辑</el-button> -->
      <el-button v-has-permi="['ip:whiteip:delete']" type="danger" @click="delWhiteIP">删除</el-button>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="活动IP" name="activeIp"></el-tab-pane>
      <el-tab-pane label="黑IP" name="blackIp"></el-tab-pane>
      <el-tab-pane label="白IP" name="whiteIp"></el-tab-pane>
    </el-tabs>

    <div class="table-content">
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="vlanId" label="ID" show-overflow-tooltip />
        <el-table-column property="ipAddress" label="IP地址" />
        <el-table-column property="checkTime" label="检查时间" />
        <el-table-column property="pingStaus" label="ping状态" v-if="activeName == 'whiteIp'">
          <template #default="scope">
            <el-tag v-if="scope.row.hasOwnProperty('pingStaus')" :type="scope.row.pingStaus==1?'primary':'danger'">{{    scope.row.pingStaus==1?'可用':'不可用' }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column property="name" label="操作" fixed="right">
          <template #default="scope">
            <el-button plain size="small"  v-has-permi="['ip:vlan:detection']" @click="testVlan(scope.row)">检测</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <el-dialog v-model="whiteVisible" :title="whiteTile" width="500">
      <el-form :model="whiteForm" label-width="auto" ref="whiteRef">
        <el-form-item label="IP地址" prop="ipAddress" :rules="[{ required: true, message: '请输入IP地址' }]">
          <el-input v-model="whiteForm.ipAddress" placeholder="格式：192.168.100.1-191.168.100.45"> </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="white-footer">
          <el-button @click="whiteVisible = false">取消</el-button>
          <el-button type="primary" @click="whiteEnter"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ipActiveIpList,ipBlackIpList ,ipWhiteIpList ,ipCheck ,whiteIpAdd ,whiteIpDel} from '@/api/ip'

const props = defineProps(['detailRowData'])
const data =reactive({
    activeName:"activeIp",
    tableData:[],
    queryParams: {
    pageNum: 1,
    pageSize: 10,
    vlanId:props.detailRowData.vlanId
  },
  total:0,
  whiteVisible:false,
  whiteTile:"",
  whiteForm:{   ipAddress:""  },
  rowData:{}
})
const {activeName ,tableData ,queryParams ,total ,whiteVisible ,whiteTile ,whiteForm ,rowData} = toRefs(data)
const handleClick = (tab,e)=>{
    console.log(tab,e);
    tableData.value = []
    queryParams.value.pageNum =1
    queryParams.value.pageSize =10
    activeName.value = tab.paneName

}

const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};

/* 检测 */
const testVlan = async(row)=>{
   let loading =  ElLoading.service({ text: '检测中...', background: 'rgba(0, 0, 0, 0.7)' });
  const res=  await ipCheck([row.vlanId])
  console.log(res);
  if(res.data){
    ElMessage.success('检测成功')
    loading.close()
    setTimeout(async() => {
      await getList()
    }, 500);
  }else{
    loading.close()
  }

}

const whiteRef = ref()
/* add */
const addWhiteIP = async()=>{
    whiteVisible.value = true
    whiteTile.value = '添加白IP'
}
const editWhiteIP = async()=>{
    if(multipleSelection.value&&multipleSelection.value.length!==1){
    ElMessage.error('请选择一条数据')
    return false
  }
  whiteVisible.value = true
  whiteTile.value = '修改白IP'
  whiteForm.value = multipleSelection.value[0]
}
const delWhiteIP = async()=>{
    //
    if(multipleSelection.value&&multipleSelection.value.length===0){
    ElMessage.error('请至少选择一条数据')
    return false
  }



  ElMessageBox.confirm(
    '确认要删除吗',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        let arr = []
     multipleSelection.value.map((item:any)=>{
       arr.push({
        vlanId :item.vlanId,
        ipAddress:item.ipAddress
       })
     })
      console.log(arr);

      const res = await whiteIpDel(arr)
      console.log(res);
      if(res.code===200){
        ElMessage.success('删除成功')
       
      await  getList()
      }


    })
    .catch(() => {

    })

}
/* 确认添加 */
const whiteEnter = async()=>{
    const {vlanId} = props.detailRowData
    console.log(vlanId);
    whiteRef.value.validate(async(valid, fields) => {
        if(valid){
            const res =    await whiteIpAdd({vlanId,...whiteForm.value})  
            console.log(res);
            if(res.data){
                ElMessage.success('添加成功')
                whiteVisible.value = false  
                await getList()

            }

        }

    })







}

const getList = async()=>{


    console.log(props.detailRowData);
    


    if(activeName.value == 'activeIp'){
        await activeIp()
    }else if(activeName.value == 'blackIp'){
        await blackIp()
    }else if(activeName.value == 'whiteIp'){
        await whiteIp()
    }
}

/* 活动ip */
const activeIp = async()=>{
    const res = await ipActiveIpList(queryParams.value)
    console.log(res);
    tableData.value = res.rows
    total.value = res.total
}
/* 黑ip */
const blackIp = async()=>{
    const res = await ipBlackIpList(queryParams.value)
    console.log(res);
    tableData.value = res.rows
    total.value = res.total
}
/* 白ip */
const whiteIp = async()=>{
    const res = await ipWhiteIpList(queryParams.value)
    console.log(res);
    tableData.value = res.rows
    total.value = res.total
}

watchEffect(async () => {
  console.log(props.detailRowData);
  if(props.detailRowData){
    await getList()
  }

});
</script>

<style scoped></style>
